<script setup>
import {  GetSquareListService,GetCommentListService,PostArticleLikeService,sendComment } from '@/apis/square.js'
import { ref } from 'vue';
// import { getCategoryAPI } from '@/apis/layout.js';
//广场列表
const SquareList=ref([])
//某文章的所有评论
const CommentList=ref([])
const getSquareList=async()=>{
  const res=await GetSquareListService()
  SquareList.value=res.data.data
  console.log('广场列表',SquareList.value);
}
getSquareList()

const commentShow=ref()

const handleChange=async(productId)=>{
  console.log('展开',productId);
  const res=await GetCommentListService(productId)
  CommentList.value=res.data.data
  console.log('评论列表',CommentList.value);
  // console.log('评论列表',res);
}

const countLike=ref(0)
const addzan=async(id)=>{
  console.log('点赞',id);
  countLike.value++
  if(countLike.value<5){
    await PostArticleLikeService(id)
    getSquareList()
  }else{
    ElMessage.warning('每天只能点赞5次哦')
  }
}
const commentId=ref(0)
const commentText=ref('')
const showComment=ref(false)
const addComment=(id)=>{
  showComment.value=true
  commentId.value=id
}
const submitComment=async()=>{
  let obj={
    content: "",
    id: 0,
    likeNumber: 0,
    pictures: [],
    title: "",
    userId: 2
  }
  obj.content=commentText.value
  const result=await sendComment(commentId.value,obj)
  console.log(result);
  const res=await GetCommentListService(commentId.value)
  CommentList.value=res.data.data
  showComment.value=false
  commentText.value=''
  getSquareList()
}
</script>


<template>
  <h1 class="title">茶友圈</h1>
  <el-divider></el-divider>
  <ul>
    <li v-for="item in SquareList" :key="item.id">
      <h2 class="subtitle">{{item.title}}</h2>
      <div  class="content">
        <div>{{item.content}}</div>
          <div class="goods-list">
            <ul>
              <li v-for="pic in item.pictures">
                <img :src="pic.picture" alt="">
              </li>
            </ul>
        </div>
     </div>
      <span class="zan"><i class="iconfont icon-dianzan"  @click="addzan(item.id)" ></i>{{ item.likeNumber }}</span>
      <span style="margin-left:10px"><i class="iconfont icon-xiaoxi" @click="addComment(item.id)">{{ item.comments.length }}</i></span>
        <div style="margin-bottom: 20px;">
          <el-collapse v-model="commentShow" @change="handleChange(item.id)">
          <el-collapse-item title="评论详情">
            <ul>
              <li v-for="comment in CommentList" :key="comment.id" >
                <div style="margin-bottom: 10px;">用户{{comment.userId}}（匿名）</div>
                <div style="margin-left: 48px;margin-bottom: 10px;"> {{comment.content}}</div>
                
              </li>
            </ul>
          </el-collapse-item>
        </el-collapse>
      </div>
    </li>
  </ul>
  <div>
    <el-dialog v-model="showComment" style="width:30%">
      <h2 class="title" style="margin-bottom: 10px">发表评论</h2>
      <el-input v-model="commentText" placeholder="请输入评论内容"></el-input>
      <el-button type="primary" @click="submitComment" style="margin-left: 435px;margin-top: 20px;">确认发表</el-button>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.title{
  //居中
  margin: 0 auto;
  text-align: center;
}
.subtitle{
  // width: 100%;
  // height: 50px;
  // line-height: 50px;
  background-color: #e7ece3;
  // margin-top: 10px;
  // background-color: gold; /* 设置背景颜色为金色 */
  padding: 10px; /* 可选的项，用于调整内容与边框的距离 */
  margin: 0; /* 可选的项，用于消除默认的外边距 */
  //圆角
  border-radius: 10px 10px 0 0;
  //阴影
  // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  // 设置文本样式
}
.content{
  width: 100%;
  height: 100%;
  font-size: 20px;
  background-color:#d8e3d0;
    .goods-list {
      margin: 10px 0;
    // display: flex;
    // justify-content: space-between;
    // list-style-type: none;
    width:900px;
    // height: 426px;
    
    ul{
      border-radius: 0 0 10px 10px;
      li {
      width: 150px;
      height: 150px;
      display:inline-block;
      transition: all .5s;
      margin-right:20px;

      img {
        width: 100%;
        height: 100%;
      }

    }
    }
  }
}
.zan{
  margin-left: 930px;
}

</style>